<template>
  <div>
    <a-card class="card" title="全员第一" :bordered="false">
      <a-table
        :columns="columns"
        :dataSource="firstList"
        :rowKey="firstList => firstList.jds_user_id"
        :pagination="false"
        :loading="loading"
      >
        <span slot="key">1</span>
        <span slot="day1" slot-scope="row">{{ row.day1 - row.day2 |numFilter }}</span>
        <span slot="day2" slot-scope="row">{{ row.day2 - row.day3 |numFilter }}</span>
        <span slot="day3" slot-scope="row">{{ (row.day1 - row.day2) - (row.day2 - row.day3)|numFilter }}</span>
        <div slot="rate" slot-scope="row">
          <a-progress :percent="row.rate" size="small" status="active" />
        </div>
      </a-table>
    </a-card>
    <br />
    <a-card class="card" title="组内排行" :bordered="false">
      <a-table
        :columns="columns"
        :dataSource="groupList"
        :rowKey="groupList => groupList.id"
        :pagination="false"
        :loading="grouploading"
      >
        <span slot="day1" slot-scope="row">{{ row.day1 - row.day2|numFilter }}</span>
        <span slot="day2" slot-scope="row">{{ row.day2 - row.day3|numFilter }}</span>
        <span slot="day3" slot-scope="row">{{ (row.day1 - row.day2) - (row.day2 - row.day3)|numFilter }}</span>
        <div slot="rate" slot-scope="row">
          <a-progress :percent="row.rate" size="small" status="active" />
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getKpiList } from '@/api/kpi'
const columns = [
  {
    title: '序号',
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '目标业绩',
    dataIndex: 'perGoals'
  },
  {
    title: '姓名',
    dataIndex: 'user'
  },
  {
    title: '入职时间',
    dataIndex: 'useTime'
  },
  {
    title: '大前天',
    dataIndex: 'day3',
    sorter: (a, b) => a.day3 - b.day3
  },
  {
    title: '前天',
    dataIndex: 'day2',
    sorter: (a, b) => a.day2 - b.day2
  },
  {
    title: '昨天',
    dataIndex: 'day1',
    sorter: (a, b) => a.day1 - b.day1
  },
  {
    title: '昨天增长',
    scopedSlots: { customRender: 'day1' }
  },
  {
    title: '前天增长',
    scopedSlots: { customRender: 'day2' }
  },
  {
    title: '两天比较',
    scopedSlots: { customRender: 'day3' }
  },
  {
    title: '本周总计',
    dataIndex: 'week',
    sorter: (a, b) => a.week - b.week
  },
  {
    title: '本月总计',
    dataIndex: 'month',
    sorter: (a, b) => a.month - b.month
  },
  {
    title: '本月结算',
    dataIndex: 'mon_actual_commission',
    sorter: (a, b) => a.mon_actual_commission - b.mon_actual_commission
  },
  {
    title: '目标完成率',
    scopedSlots: { customRender: 'rate' }
  }
]

const groupList = []

export default {
  name: 'Ranking',
  data () {
    return {
      description: '本小组业绩排行榜单。',
      grouploading: false,
      groupList,
      columns,
      firstList: [],
      loading: false
    }
  },
  created () {
    this.getKpiList()
  },
  methods: {
    getKpiList () {
      this.loading = true
      this.grouploading = true
      getKpiList({})
        .then(res => {
          this.firstList = res.result.first
          this.groupList = res.result.groupList
          this.grouploading = false
          this.loading = false
        })
        .catch(err => {
          this.grouploading = false
          this.loading = false
          console.log(err)
        })
    }
  },
  filters: {
    numFilter (value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    }
  }
}
</script>
